<template>
  <div class="msgMail">
    <div class="msg-list msgMail-item" v-for="item in smsPltList.data">
      <h3>短信平台</h3>
      <div class="msgMail-detail">
        <p class="msgMail-name">{{item.platformName}}</p>
        <p class="msgMail-account">账户：{{item.accessKey}}</p>
      </div>
    </div>
    <div class="msg-list msgMail-item" v-for="item in mailPltList.data">
      <h3>邮件平台</h3>
      <div class="msgMail-detail">
        <p class="msgMail-name">{{item.host}}</p>
        <p class="msgMail-account">账户：{{item.account}}</p>
      </div>
    </div>
  </div>
</template>
<script>
  import {mapState, mapActions} from 'vuex'
  export default {
    data () {
      return {
        params: {
          page: 1,
          size: 10
        }
      }
    },
    mounted () {
      this.initPageData()
    },
    computed: {
      ...mapState({
        smsPltList: state => state.msgMailManage.smsPltList,
        mailPltList: state => state.msgMailManage.mailPltList
      })
    },
    methods: {
      ...mapActions(['getSmsPlateList', 'getMailPlateList']),
      // 初始化页面数据
      initPageData () {
        this.getSmsPlateList({...this.params})
        this.getMailPlateList({...this.params})
      }
    }
  }
</script>
<style lang="scss">
  .msgMail{
    &-item{
      border: 1px solid #dfdfdf;
      width: 242px;
      float: left;
      margin-right: 20px;
      margin-bottom: 20px;
      h3{background: #ddd; height: 30px;border-bottom: 1px solid #dfdfdf;line-height: 30px;text-indent: 25px;}
    }
    &-detail{
      margin: 10px 20px 20px;
    }
    &-name{
      font-size: 16px;
      font-weight: bold;
    }
    &-account{
      margin-top: 10px;
    }
  }
</style>
